﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html>
<head>
    <title>TicTacToe</title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  
</head>
<body onload="draw();">
  <canvas id="canvas" width="300" height="300"
  style="border: 1px solid black;"></canvas>
</body>  
</head>

<script type="text/javascript">
canvas = document.getElementById("canvas");
      ctx = canvas.getContext("2d")
	  var flag= true;
var timer = setInterval(showmsg, 500);
    function draw() {
      ctx.fillStyle = "black";	
      ctx.beginPath();

      var x;
      var y;

      canvas.onmousedown = function(e) {
        x = e.clientX;
        y = e.clientY;
        ctx.moveTo(x, y);
      }

      canvas.onmouseup = function(e) {
        x = null;
        y = null;
      }

      canvas.onmousemove = function(e) {
        if (x == null || y == null) {
          return;
        }
        x = e.clientX;
        y = e.clientY;
        x -= canvas.offsetLeft;
        y -= canvas.offsetTop;
        ctx.lineTo(x, y);
        ctx.stroke();
        ctx.moveTo(x, y);
      }
    };  
     function showmsg() {
	
	if (flag)
	{
	    flag=false;
	    ctx.strokeStyle = "black";
	}
	else
	{
	    flag=true;
        ctx.strokeStyle = "red";
	}	
		
     }	
	 
function continueExecution()
{ 
 var textBox = document.getElementById("inputtext");
 textBox.value += "Message from timer 2";
}	 
 
</script>